<template>
	<div class="kaoguanguanli" style="padding-bottom: 1.1rem;">
    <div style="padding: 0.2rem;">
      <div style="border: 1px #eaeaea solid; padding: 0.2rem; border-radius: 5px; margin-bottom: 0.2rem; background: #fff;" class="flexbc" v-for="item in tableData" :key="item.id">
        <div class="flexc" style=" cursor: pointer;" @click="chakanxiangqing(item)">
          <div style="overflow: hidden;" class="flexcc"><img :src="item.cover_url" style="width: 100%;"></div>
          <div style="width: 900px; font-size: 12px; color: #999; width: 100%; overflow: hidden;">
            <div>
              <div style="font-weight: bold; font-size: 16px; color: #333; margin-top: 0.1rem;">{{item.name}}</div>
              <div style="margin-top: 0.1rem;">{{item.desc}}</div>
              <div style="margin-top: 0.1rem;">时间：{{item.match_time_start}}——{{item.match_time_end}}</div>


              <div style="margin-top: 0.1rem;" v-if="item.province != '全国'">地点：{{item.province}}/{{item.city}}/{{item.district}}</div>
              <div style="margin-top: 0.1rem;" v-if="item.province == '全国'">地点：全国</div>

              <div style="margin-top: 0.1rem;">距离报名结束：<span style="color: #f00;">{{item.guanmen}}</span></div>
              <!-- <div style="display: flex; justify-content: flex-end; margin-top: 0.1rem;"><el-button type="primary" size="small" @click.stop="baomingkai(item)">立即报名</el-button></div> -->
            </div>
          </div>
        </div>
      </div>

      <dibu></dibu>


    </div>

    <el-dialog  title="报名参赛"  :visible.sync="log"  width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="flexc mb20">
        <div style="width: 1.5rem; text-align: right; margin-right: 30px;">赛事：</div>
        {{dangqian.name}}
      </div>
      <div class="flexc mb20">
        <div style="width: 1.5rem; text-align: right; margin-right: 30px;">价格：</div>
        <span style="font-weight: bold; margin-right: 10px; color: #f00;">{{dangqian.price}}</span>元
      </div>
      <div class="flexc mb20">
        <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">姓名：</div>
        <el-input v-model="all.name" style="width: 4rem; " placeholder="请输入姓名"></el-input>
      </div>

      <div class="flexc mb20">
         <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">性别：</div>
         <div>
           <el-radio v-model="all.sex" label="1">男</el-radio>
           <el-radio v-model="all.sex" label="2">女</el-radio>
         </div>
      </div>

      <div class="flexc mb20">
         <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">组别：</div>
         <el-select v-model="all.type" style="width: 4rem;" placeholder="请选择组别">
             <el-option label="初中生组" value="1"></el-option>
             <el-option label="高中生组" value="2"></el-option>
             <el-option label="高职生组" value="3"></el-option>
             <el-option label="大学生组" value="4"></el-option>
         </el-select>
      </div>


      <div class="flexc mb20">
         <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">出生日期：</div>
         <el-date-picker v-model="all.birthday" type="date" value-format="yyyy-MM-dd" style="width: 4rem;" placeholder="请输入出生日期"> </el-date-picker>
      </div>
      <div class="flexc mb20">
         <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">身份证号：</div>
         <el-input v-model="all.id_card" style="width: 4rem; " placeholder="请输入身份证号"></el-input>
      </div>
      <div class="flexc mb20">
         <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">邮箱：</div>
         <el-input v-model="all.email" style="width: 4rem; " placeholder="请输入邮箱"></el-input>
      </div>
      <div class="flexc mb20">
         <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">学校：</div>
         <el-input v-model="all.unity" style="width: 4rem; " placeholder="请输入学校"></el-input>
      </div>
      <div class="flexc mb20">
         <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">手机号：</div>
         <el-input v-model="all.phone" style="width: 4rem; " placeholder="请输入手机号"></el-input>
      </div>
      <div class="flexc mb20">
         <div style="width:  1.5rem; text-align: right; margin-right: 0.2rem;">验证码：</div>
         <div style="position: relative;">
           <el-input v-model="all.code" style="width: 4rem; " placeholder="请输入验证码"></el-input>
           <div style="position: absolute; right: 10px; top:10px; cursor: pointer;" @click="getcode()" >{{daojishiname}}</div>
         </div>

      </div>
      <div class="flexc mb20">
         <div style="width: 1.5rem; text-align: right; margin-right: 0.2rem;">渠道：</div>
         <el-input v-model="all.channel" style="width: 4rem; " placeholder="请输入渠道"></el-input>
      </div>
      <div class="flexc mb20">
         <div style="width: 1.5rem; text-align: right; margin-right: 0.2rem;">国籍：</div>
         <el-input v-model="all.country" style="width: 4rem; " placeholder="请输入国籍"></el-input>
      </div>
      <div class="flexc mb20">
         <div style="width: 1.5rem; text-align: right; margin-right: 0.2rem;">居住地址：</div>
         <el-input v-model="all.address" style="width: 4rem; " placeholder="请输入居住地址"></el-input>
      </div>
      <div class="flexc mb20">
         <div style="width: 1.5rem; text-align: right; margin-right: 0.2rem;">奖品邮寄地址：</div>
         <el-input v-model="all.post_address" style="width: 4rem; " placeholder="请输入奖品邮寄地址"></el-input>
      </div>
      <div class="flexc mb20">
         <div style="width: 1.5rem; text-align: right; margin-right: 0.2rem;">邮编：</div>
         <el-input v-model="all.post_code" style="width: 4rem; " placeholder="请输入邮编"></el-input>
      </div>



      <div class="flexc mb20" style="padding-left: 210px;">
        <div class="flexc">
          <el-checkbox v-model="checked">我已经阅读</el-checkbox>
          <div style="color: #f00; cursor: pointer;" @click="log2 = true">报名参赛条款</div>
        </div>


      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="fabu">报名</el-button>
      </div>

    </el-dialog>

    <el-dialog  title="参赛条款"  :visible.sync="log2"  width="700px" :close-on-click-modal="false" :close-on-press-escape="false">

      <div>
        <div>尊敬的参赛队/参赛选手： 您好!</div>
        <div>请您仔细阅读以下报名参赛的相关条款：</div>
        <div>前提：</div>
        <div>1.未成年报名者在提交报名资料前应先取得监护人同意。</div>
        <div>2.若您不理解或不接受其中的任何内容，请先慎重考虑、暂勿报名。当您通过本大赛官网报名系统向赛事组委会提交报名材料，即表明您已阅读、理解、并接受以下全部参赛条款。</div>
        <div>一、安全参赛</div>
        <div>全体参赛人员须充分理解并承诺确保安全，是本系列竞赛持续发展的前提。为保护全体参赛人员及赛事组织单位的权益，根据相关法律法规，全体参赛人员报名参加2024年世界机器人大赛无人机技能赛广东省系列选拔赛即表示理解、接受、并确保遵守以下安全条款：</div>
        <div>1.全体参赛人员须保证具有完全民事行为能力，并且具备独立测试、操控无人机的能力，需保证仔细阅读报名须知、比赛规则等相关规定文件。</div>
        <div>2.在赛事期间，保证所有无人机的制作（如涉及）、测试、使用等行为不会给己方队员及对方队员、工作人员、观众、设备和比赛场地造成伤害。</div>
        <div>3.保证无人机的结构设计（如涉及）能充分配合到赛前无人机安全检查检录的方便性，并积极配合赛事主办方的赛前检录。</div>
        <div>4.保证不使用任何燃油驱动的发动机、爆炸物、以高压气体为工作气体的设备、以及其它危险物品等。</div>
        <div>5.在研发备赛和参赛的任何时段，参赛队员需充分注意安全问题，指导教师需负起安全指导和监督的责任。</div>
        <div>6.全体参赛人员含指导老师，应充分了解机械设备的操作具有一定风险性，在比赛现场需确保个人操作及观看时的安全，遵守赛事组委会比赛期间制定的全部安全规章和制度，为个人安全的第一责任人。如发生非主办单位原因造成的个人伤害，由个人承担相关责任。</div>
        <div>7.全体参赛人员含指导老师，须充分尊重组委会及承办方的赛事组织工作，充分遵守参赛条例、比赛纪律、竞赛规则、赛程安排。承诺在比赛期间以及赛前赛后，均充分尊重并服从现场裁判做出的最终判罚，尊重组委会及承办方所邀请的专家裁判组、赛会工作人员、赛会赞助商代表。不得以任何理由在现场和（或）网上干扰、阻扰、攻击、诋毁组委会及承办方、各类型工作人员的办赛组织工作、裁判的赛事判罚工作。</div>
        <div>二、保密条款</div>
        <div>1.全体参赛人员含指导老师，应以谨慎负责的态度，尽可能采取一切必要、合理的措施，对可能涉及组委会及承办单位商业秘密的相关信息进行保密。</div>
        <div>三、隐私权</div>
        <div>1.当您报名参加2024年世界机器人大赛无人机技能赛广东省系列选拔赛时，组委会及承办单位需要您提供必要的相关信息，包括而不仅限于：姓名、性别、身份证号、联络方式、所在学校、就读专业、紧急联络人等直接或间接的个人身份信息，请您充分理解并积极配合提供，组委会及承办单位承诺上述信息仅用于本系列比赛专用，不会用于其它任何非比赛相关的用途。</div>
        <div>2.为完成赛事组织与管理相关工作，我们将在组委会及承办单位内部，使用全体参赛队员的个人信息用于包括但不限于保险购买、赛项注册、赛事分组等等与比赛相关的事宜。</div>
        <div>3.如政府部门、司法机关等依照法定程序要求披露个人信息时，组委会及承办单位将根据执法单位之要求或出于公共安全之目的提供个人信息，在此情况下之任何披露均免责。</div>
        <div>4.参赛条款的解释及修改权归组委会所有，保留在任何时间不经通知更新修改本使用条款的权利。任何违反参赛条款的行为并由此造成对本系列比赛正常进行的干扰、阻碍以及损失，组委会有权采取法律措施。</div>
        <div>四、其他须知：</div>
        <div>大赛获奖证书上涉及的学校名称 、获奖人姓名、指导老师姓名均使用系统报名信息，请确保系统提交信息准确。因证书制作及盖章需要时间，颁奖当日只颁发奖杯/奖牌，证书会在赛后进行统一邮寄。</div>
        <div>五、网上缴费</div>
        <div>1.全部参赛选手均需通过珠海汇流无人机技能大赛官网（即本网站）缴纳参赛服务费。 参赛者完成缴费后状态变更为“报名成功 (已缴费)”即视之为完成报名。</div>
        <div>2.参赛服务费用包含培训费、组委会指定仿真平台使用费、比赛期间参赛选手的人身意外保险费：</div>
        <div>● 参加1个赛项，368元/人</div>
        <div>● 参加2个赛项，428元/人</div>
        <div>● 参加3个赛项，488元/人</div>
        <div>● 每人最多可参加3个赛项，每位选手限定1位指导老师。</div>
        <div>3.缴费时请务必备注姓名，否则无法确认缴费，无法通过审核。</div>
        <div>4.已通过审核、但逾期未缴费者，视为报名无效。</div>
        <div>5.一旦报名成功并完成缴费，如非主办方原因导致的无法最终参赛（包括但不限于报名信息提交错误、缴费备注错误、交通延误、个人原因、临时事件等等），相关费用概不退还。</div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="log2 = true">确定</el-button>
      </div>

    </el-dialog>
    <fenxiang></fenxiang>
    <!-- <login @denglule='denglule'></login> -->
	</div>
</template>

<script>
  import fenxiang from '../fenxiang.vue'
  import login from '../login.vue'
  import dibu from '../footer.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      dibu,login,fenxiang
    },
		data() {
			return {
        checked:false,
        search:{
          page:1,
          page_size:20,
        },
        total:0,
        log:false,
        tableData:[],
        all:{
          competition_id:"",
          name:"",
          sex:"",
          birthday:"",
          id_card:"",
          email:"",
          unity:"",
          phone:"",
          mobile:"",
          channel:"",
          country:"",
          address:"",
          post_address:"",//奖品邮寄地址
          post_code:""
        },
        checked:false,
        dangqian:{
          name:"",
          price:""
        },
        daojishilist:[],

        daojishisv:"",
        daojishiname:'获取验证码',
        daojishi:60
			}
		},
    beforeDestroy() {
      this.daojishilist.forEach((item)=>{
        clearInterval(item)
      })
    },
		created() {
      this.getlist()

		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
		},
		methods: {

      getcode:function(){
        if(this.all.phone.length != 11){
          vant.Toast('请输入正确手机号');

          return
        }
        if(this.daojishiname != '获取验证码'){
          return
        }
        axios.post(this.IP_URL+'/api/sms/code?phone='+this.all.phone).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.daojishisv = setInterval(()=>{

              if(this.daojishi > 0){
                this.daojishi = this.daojishi - 1
                this.daojishiname = this.daojishi+'秒后再获取'
              }else{
                this.daojishi = 60
                clearInterval(this.daojishisv)
                this.daojishiname = '获取验证码'
              }

            },1000)
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      chakanxiangqing:function(item){
        let url = location.origin + '/h5/bisai/detail?id='+item.id
        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9e4d5f151960619&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
        // this.$router.push('/bisai/detail?id='+item.id)
      },
      baomingkai:function(item){
        axios.get(this.IP_URL+'/admin/competition/info?id='+item.id).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.dangqian = JSON.parse(JSON.stringify(response.data.data))
        		this.all.competition_id = item.id
        		this.log = true
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })

      },
      fabu:function(){
        if(!this.checked){
          vant.Toast('请先阅读并同意“报名参赛条款”');
          return false
        }
        axios.post(this.IP_URL+'/api/enrolment/save',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {

            vant.Toast('操作成功');
            this.log = false
            this.getlist()
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      getlist:function(){
        axios.get(this.IP_URL+'/api/competition/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.tableData = response.data.data.data
            this.total = response.data.data.total

            this.tableData.forEach((item,index)=>{

              let now = moment()
              let time = moment(item.sign_up_time_end)
              let miao = time.diff(now, 'seconds')


              if (miao > 0) {
                this.daojishilist[index] = setInterval(() => {
                  let result = parseInt(miao--)

                  if (miao > 0) {
                    let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math
                      .floor(result / 3600);
                    let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 %
                      60)) : Math.floor((result / 60 % 60));
                    let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math
                      .floor((result % 60));

                    let res = '';
                    if (h !== '00') res += `${h}小时`;
                    if (m !== '00') res += `${m}分`;
                    res += `${s}秒`;

                    this.$set(this.tableData[index], 'guanmen', res)
                  }
                }, 1000)
              }else{
                this.$set(this.tableData[index], 'guanmen', '已结束')
              }
            })
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
    }
	}
</script>


<style scoped >
  /deep/ .el-input__inner{ width: 4rem;}
  /deep/ .el-dialog__header{ padding: 0;}
</style>
